<template>
  <div class="putstore">
        <div class="top-add">
            <div style="width:80%">
              <el-page-header @back="backDestory" content="新增报废单"></el-page-header>
            </div>
            <div>
                 <el-button size="mini" type="primary" @click="selectProd">选择装备</el-button>
                <el-button size="mini" type="primary" @click="saveDestory">保存</el-button>
                <!-- <el-button size="mini" type="primary" @click="backDestory">取消</el-button> -->
            </div>
            
            
        </div>
      <el-row :gutter="16" style="line-height:40px;margin-top:-20px;margin-bottom:20px">
        <el-col :span="4">
          <div class="">
            <label for="">报废单号</label>
            <el-input v-model="destroyNum" size="small" disabled placeholder="可自动生成" style="width:80%"></el-input>
          </div>
        </el-col>

         <el-col :span="4">
          <div>
            <label for="">报废类型</label>
            <div class="main-content">
              <el-select v-model="destroyType" placeholder="请选择" style="width:80%"  size="small">
                <el-option
                  v-for="item in destroyTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="">
            <label for="">报废日期</label>
            <el-date-picker size="small" type="date" style="width:80%" placeholder="选择日期" v-model="destroyDate"></el-date-picker>
          </div> 
        </el-col>

        <el-col :span="4">
          <div class="">
            <label for="">制单人</label>
            <el-input v-model="destroyPerson" size="small" style="width:80%"></el-input>
          </div> 
        </el-col>

        <el-col :span="4">
            <label for="">备注</label>
            <el-input v-model="destroyRemark" size="small" placeholder="" style="width:90%"></el-input>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table :data="destroySelectProd" border style="width: 100%">
            <!-- <el-table-column label="图片" width="60">
              <template slot-scope="scope">
                <div>
                  <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="categoryTwoName" label="装备细类"></el-table-column>
            <!-- <el-table-column prop="prodCode" label="装备编号" width="120"></el-table-column> -->
            <el-table-column prop="prodName" label="装备名称"></el-table-column>
            <el-table-column prop="rfid" label="RFID编码"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格"></el-table-column>
            <!-- <el-table-column prop="prodStocknum" label="库存数"></el-table-column>
              <template slot-scope="scope">
                <div>
                  <el-input onkeyup="value=value.replace(/[^\d]/g,'')" size="mini" 
                    v-model="scope.row.prodNum" @change="changeNums($event,scope.row.prodStocknum)"
                    placeholder="请输入数字"
                  ></el-input>
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="emit" label="单位"></el-table-column>
            <!-- <el-table-column prop="prodPrice" label="价格"></el-table-column> -->
            <el-table-column prop="areaName" label="库区"></el-table-column>
            <el-table-column prop="departmentCode" label="库位"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-delete" @click="delSelectProd(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      

      <div class="autospace"></div>

      <selectstockdetail :selectprodDialog.sync="selectprodDialog"></selectstockdetail>
  </div>
</template>

<script>
import { DestoryStore, FindDestoryOrderById, UpdateDestoryOrder } from '@/api/destory';
import selectstockdetail from '@/components/selectstockdetail';
import { getStore } from '@/utils/app.js'
export default {
  name: 'putstore',
  components: {
    selectstockdetail
  },
  data() {
    return {
        selectprodDialog: false, // 打开选择商品弹框
        is_search: false,
        destroyNum: '',
        destroyType: '',
        destroyDate: '',
        destroyPerson: '',
        destroyRemark: '',
        newSelect: [],
        destroyId: null,
        destroySelectProd: [
           
        ],
        destroyTypeList: [
            {id: 1, name:'到期报废'},
					  {id: 2, name:'损坏报废'},
        ]
    }
    
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
    getSelectprod() {
      return this.$store.state.ware.selectProds;
    }
  },
   watch: {
    selectprodDialog(newVal) {
      if (!newVal) {
        let newArr = this.destroySelectProd.concat(this.getSelectprod);
        this.newSelect = JSON.parse(JSON.stringify(newArr));
        for( let n = 0; n < this.newSelect.length; n++) {        
          this.newSelect[n].edit_id = n + 1;
        }
        this.destroySelectProd = this.newSelect;
        // 去除里面重复的商品
        // this.destroySelectProd = this.newSelect.filter((item, index, origin) => 
        //   index === origin.findIndex(itemInner => {
        //     return itemInner.stockId === item.stockId
        //   }
        // ))
        // console.log(this.destroySelectProd)
      }
    }
  },
  methods:{
    // 输入报废数时进行判断
    changeNums(value,stock) {
      let newStock = parseInt(stock);
      let newVal = parseInt(value);
      let ifTrue = newStock - newVal;
      if (ifTrue < 0) {
        this.$message({
          message: '库存数不足',
          type: 'warning'
        })
      }
    },
    // 去选择商品
    selectProd() {
      this.selectprodDialog = true;
    },
    backDestory() {
        this.$router.push('/destory')
    },
    delSelectProd(el) {
      this.destroySelectProd = this.destroySelectProd.filter( e => e.edit_id != el.edit_id);
    },
    // 保存报废信息
    saveDestory() {
      this.destroyDate = this.formatDate(this.destroyDate);
      if (this.destroyId) {
        // 存在即修改
        let reqData = {
            destroyId: this.destroyId,
            destroyNum: this.destroyNum,
            destroyTypeid: this.destroyType,
            destroyDate: this.destroyDate,
            destroyPerson: this.destroyPerson,
            destroyRemark: this.destroyRemark,
            destroyProds: this.destroySelectProd,
        }
        // console.log(reqData)
        UpdateDestoryOrder(reqData).then( res => {
          this.$message({
            message: res.data.msg,
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push('/destory')
          }, 1000)
        }).catch( error => console.log(error))

      } else {
        // 不存在即新增
          let reqData = {
              destroyNum: this.destroyNum,
              destroyTypeid: this.destroyType,
              destroyDate: this.destroyDate,
              destroyPerson: this.destroyPerson,
              destroyRemark: this.destroyRemark,
              destroyProds: this.destroySelectProd,
          }
          // console.log(reqData)
          DestoryStore(reqData).then( res => {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push('/destory')
            }, 1000)
          }).catch( error => console.log(error))
      }
      
    }
  },

  mounted() {
    this.destroyId = this.$route.query.destroyId;
    if (this.destroyId) {
      FindDestoryOrderById(this.destroyId).then( res => {
        let orderDetail = res.data[0];
        orderDetail.destroyDate = this.formatDate(orderDetail.destroyDate);
        this.destroyNum = orderDetail.destroyNum;
        this.destroyDate = orderDetail.destroyDate;
        this.destroyPerson = orderDetail.destroyPerson;
        this.destroyRemark = orderDetail.destroyRemark;
        this.destroyType = orderDetail.destroyTypeid;
        if (orderDetail.destroyProds && orderDetail.destroyProds.length != 0) {
          this.destroySelectProd = orderDetail.destroyProds;
          for( let n = 0; n < this.destroySelectProd.length; n++) {        
            this.destroySelectProd[n].edit_id = n + 1;
          }
        }  
      })
    }   
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,100,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
  .top-add {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    // font-weight: 700;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
  }
</style>
  
